<template>
  <div class="bgc">
    <el-card class="box-card ">
        <div slot="header" class="clearfix">
          <span>黑马面经运营后台</span>
        </div>

        <!-- 卡片内容 -->
        <div  class="text item">

        <el-form ref="form" :rules="rules" label-position="top" label-width="80px" :model="user">
          <el-form-item label="账号" prop='username'>
            <el-input v-model="user.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="user.password" type="password"></el-input>
          </el-form-item>
         <el-form-item class="login">
            <el-button type="primary" @click="login">登录</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-form>

        </div>
    </el-card>
</div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        username: '',
        password: '',
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    async login() {
      await this.$refs.form.validate();

      //  调用登录action
      this.$store.dispatch('user/login', this.user);
      console.log('登录成功');
    },
    reset() {
      this.$refs.form.resetFields();
    },
  },
};
</script>

<style scoped>
.bgc{
display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  background-image: url("@/assets/wallpaper.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

 .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 33%;
    border: 0;
  }
 ::v-deep .el-card__header{
    background-color: #727cf5;
    color: #fff;
    text-align: center;
  }
  .login{
    text-align: center;
    /* margin-bottom: 0; */
  }
</style>
